import 'package:flutter/material.dart';
import 'package:net_store/DataSource/DataStore.dart';
import 'package:net_store/DataSource/Http.dart';
import 'package:net_store/Entities/Category.dart';
import 'package:net_store/Entities/Store.dart';
import 'package:net_store/Pages/ProductViewPage.dart';
import 'package:net_store/Widgets/SearchButton.dart';
import 'package:net_store/main.dart';

class CategoryPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
  Store selectedStore;
  List<Category> categories;

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xff1A222F),
          title: SearchButton(
            onTap: (){

            },
          ),
        ),
        body: Row(
          children: <Widget>[
            Container(
              color: Color(0x08000000),
              width: 130.0,
              child: ListView(
                children: DataStore.stories.map((store) => buildstoreItem(store)).toList()
              ),
            ),
            Expanded(
              child: GridView(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  mainAxisSpacing: 10
                ),
                children: (categories ?? []).map((category) => buildCategoryItem(category)).toList()
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildstoreItem(Store store){
    return InkWell(
      splashColor: Colors.deepPurple,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 18.0, horizontal: 5.0),
        child: Row(
          children: <Widget>[
            Image.network(store.icon, width: 30.0, height: 30.0,),
            SizedBox(width: 5.0,),
            Text(store.name, style: TextStyle(color: (selectedStore?.id ?? -1) == store.id ? Colors.white : null))
          ],
        ),
        decoration: BoxDecoration(
          color: (selectedStore?.id ?? -1) == store.id ? Color(0xcc1A222F) : null,
          border: Border(
            top: BorderSide(color: Colors.black38, width: 0.1)
          )
        ),
      ),
      onTap: () async {
        selectedStore = store;
        categories = await dataSource.getCategoriesByStore(selectedStore.guid);

        setState(() {

        });
      },
    );
  }

  Widget buildCategoryItem(Category category){
    return InkWell(
      child: Container(
        padding: EdgeInsets.all(5.0),
        child: Column(
          children: <Widget>[
            Expanded(child: Padding(
              padding: EdgeInsets.only(left: 15.0, right: 15.0, top: 10.0, bottom: 2.0),
              child: Image.network(category.icon),
            )),
            Text(category.name, textAlign: TextAlign.center,)
          ],
        ),
      ),
      onTap: () async {
        var products = await dataSource.getProductsByCategory(category.guid);
        Navigator.of(context).push(MaterialPageRoute(builder: (context) => ProductViewPage(products)));
      },
    );
  }
}
